<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="companyName">
        <el-input
          v-model="list.filter.companyName"
          placeholder="企业名称"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-form-item prop="name">
        <el-input
          v-model="list.filter.name"
          placeholder="企业管理员姓名"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-form-item prop="account" :rules="[simplifyAccount]">
        <el-input v-model="list.filter.account" placeholder="账号" clearable>
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-form-item prop="phone" :verify="{ required: false, type: 'phone' }">
        <el-input v-model="list.filter.phone" placeholder="手机号" clearable>
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <!-- <el-form-item prop="wechatNickName">
        <el-input
          v-model="list.filter.wechatNickName"
          placeholder="企业管理员微信昵称"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item> -->
      <el-form-item prop="areaCode">
        <RegionSelect
          v-model="list.filter.areaCode"
          :props="{
            checkStrictly: true
          }"
        />
      </el-form-item>
      <el-form-item prop="status">
        <Status v-model="list.filter.status" />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <span>
        <AuthButton @click="c" name="新增" />
        <!-- 导出 -->
        <ExportExcel
          url="/sot-admin-api/sys/company-account/export"
          :param="list.filter"
        />
      </span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column align="center" type="index" />
      <el-table-column label="企业名称" prop="companyName" />
      <el-table-column label="所属地区" prop="areaName" />
      <el-table-column label="管理员姓名" prop="name" />
      <el-table-column label="账号" prop="account" />
      <el-table-column label="手机" prop="phone" width="140" />
      <!-- <el-table-column label="微信昵称" prop="wechatNickName" /> -->
      <el-table-column label="状态" width="80" align="center">
        <template slot-scope="{ row: { userId, status } }">
          <KiPopSwitch
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id: userId, status: status ^ 1 })"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="{ row }">
          <!-- <AuthButton
            @click="getWxTicketid(row)"
            circle
            name="微信绑定"
            type="success"
          >
            <i class="el-icon-yjwl-weixin" />
          </AuthButton> -->
          <AuthButton
            @click="bindPhone(row)"
            circle
            name="手机号绑定"
            type="success"
          >
            <i class="el-icon-mobile-phone" />
          </AuthButton>
          <AuthButton
            @click="changePwd(row)"
            circle
            name="修改密码"
            type="success"
          >
            <i class="el-icon-lock" />
          </AuthButton>
          <AuthButton @click="u(row, 'cache')" name="编辑" />
          <AuthButton @click="d({ id: row.userId })" name="删除" />
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
    >
      <template #el-form>
        <el-form-item
          label="选择企业"
          prop="companyId"
          v-if="form.status === 'c'"
          verify
        >
          <KiSelect
            v-model="form.data.companyId"
            :options="companyOptions"
            placeholder="请选择所属企业"
            :props="{
              value: 'companyId',
              label: 'companyName'
            }"
          />
        </el-form-item>
        <el-form-item
          label="企业管理员姓名"
          prop="name"
          :verify="{ maxLength: 20 }"
        >
          <el-input
            v-model="form.data.name"
            placeholder="请输入企业管理员姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="企业管理员角色选择" prop="roleId" verify>
          <KiSelect
            v-model="form.data.roleId"
            :options="roleOptions"
            :props="{ value: 'roleId', label: 'name', labelRight: 'remark' }"
          />
        </el-form-item>
        <el-form-item
          label="企业账号"
          prop="account"
          verify
          :rules="simplifyAccount"
        >
          <el-input
            v-model="form.data.account"
            autocomplete="new-password"
            placeholder="请输入账号"
            clearable
          />
        </el-form-item>
        <el-form-item
          v-if="form.status == 'c'"
          label="密码"
          prop="password"
          verify
          :rules="password"
        >
          <el-input
            v-model="form.data.password"
            type="password"
            autocomplete="new-password"
            placeholder="请输入密码"
            clearable
          />
        </el-form-item>
      </template>
    </KiFormDialog>

    <!-- <bindWx ref="bindWx" /> -->
    <bind-phone ref="bindPhone" />
    <change-pwd ref="changePwd" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
// import bindWx from '../components/bind-wx.vue'
import bindPhone from '../components/bind-phone.vue'
import changePwd from '../components/change-pwd.vue'
import { password } from '@/utils/validate-ruler.js'

export default {
  mixins: [pageMixin],
  components: { bindPhone, changePwd },
  computed: {
    ...mapGetters(['areaTree'])
  },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/sys/company-account',
      axiosConfig: {
        getList: {
          url: 'pageList'
        },
        d: {
          method: 'DELETE'
        }
      },
      list: {
        filter: {
          companyName: null,
          account: null,
          phone: null,
          areaCode: null,
          status: null
        }
      }
    }),
  data() {
    return {
      password,
      roleOptions: [],
      simplifyAccount: {
        trigger: 'blur',
        validator: (rule, value, callback) => {
          if (value != '' && !/^[A-Za-z\d]+$/.test(value)) {
            callback(new Error('需为数字或字母'))
          } else {
            callback()
          }
        }
      },
      companyOptions: []
    }
  },
  watch: {
    'form.status'(n) {
      if (n == 'c') {
        this.$POST('sot-admin-api/sys/company-account/companyForSelect').then(
          (res) => {
            this.companyOptions = res.data
          }
        )
      }
    }
  },
  created() {
    this.$GET('sot-admin-api/sys/company-role/listForSelect').then((res) => {
      this.roleOptions = res.data || []
    })
  },
  methods: {
    bindPhone(row) {
      this.$refs.bindPhone.open(row)
    },
    getWxTicketid(row) {
      this.$refs.bindWx.getWxTicketid(row)
    },
    changePwd(row) {
      this.$refs.changePwd.open(row)
    }
  }
}
</script>

<style lang="scss" scoped></style>
